<template>
  <div class="home" style="height:100%">
    <actionsheet :menus="menus" v-model="showMenu" :show-cancel="true" @on-click-menu="handler"></actionsheet>
    <scroller lock-x scrollbar-y use-pullup use-pulldown height="100%" @on-pullup-loading="loadMore" @on-pulldown-loading="refresh" v-model="status" ref="scroller">
      <div class="box2">
        <div>
          <div class="home-header">
            <div class="home-banner ">
              <div class="home-header-flex">
                <div class="home-header-flex-item home-header-img-auth">
                  <img class="home-header-img-auth-img" src="./../../assets/images/auth.png">
                </div>
                <div class="home-header-flex-item home-header-content">
                  <div class="home-header-content-name">
                    果子姐姐的店铺

                  </div>
                  <div class="home-header-content-des">
                    新鲜、绿色的健康鲜果店。
                  </div>
                  <div class="home-header-content-footer">
                    <div class="home-header-content-land" @click="showMenu=true">
                      <img src="../../assets/images/share.png">
                      <span>分享店铺</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--店铺精选-->
            <div class="home-secod">
              <img src="../../assets/images/home-select.png">
            </div>
            <div class="yyt-list">
              <div class="yyt-item yyt-item-flex" v-for="item in list" @click="goDetail(item.id)">
                <div class="yyt-item-img">
                  <x-img :src="item.imageUrl" :scroller="$refs.scroller"></x-img>
                </div>
                <div class="yyt-item-panl" style="width:100%">
                  <div class="yyt-item-panl-name home-items-name">{{item.goodsName}}</div>
                  <!-- <div class="yyt-item-panl-centent">商品名称</div>  -->
                  <div class="yyt-item-panl-flx">
                    <div class="yyt-item-panl-flx-left">
                      <div class="yyt-item-panl-flx-left-obsolete" v-if="item.priceOrigRange&&item.priceOrigRange!=item.priceRange">{{item.priceRange | currency}}</div>
                      <div class="yyt-item-panl-flx-left-now">{{(item.price/100).toFixed(2)|currency}}
                        <span class="yyt-item-panl-flx-right-home">促销价</span>
                      </div>
                    </div>
                    <div class="yyt-item-panl-flx-right" style="display: flex;align-items: flex-end;">
                      <div class="yyt-item-panl-flx-right-but">
                        <div class="yyt-item-panl-flx-right-button">立即抢购</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="yyt-item yyt-item-flex" v-for="item in list" @click="goDetail(item.id)">
                <div class="yyt-item-img"><img :src="item.imageUrl"></div>
                <div class="yyt-item-panl" style="width:100%">
                  <div class="yyt-item-panl-name home-items-name">{{item.goodsName}}</div>
                  <!-- <div class="yyt-item-panl-centent">商品名称</div>  -->
                  <div class="yyt-item-panl-flx">
                    <div class="yyt-item-panl-flx-left">
                      <div class="yyt-item-panl-flx-left-obsolete">{{item.priceOrig}}</div>
                      <div class="yyt-item-panl-flx-left-now">{{item.price|currency}}</div>
                    </div>
                    <div class="yyt-item-panl-flx-right">
                      <div class="yyt-item-panl-flx-right-but">
                        <div class="yyt-item-panl-flx-right-button">立即抢购</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--pulldown slot-->
      <div slot="pulldown" class="xs-plugin-pulldown-container xs-plugin-pulldown-down" style="position: absolute; width: 100%; height: 60px; line-height: 60px; top: -60px; text-align: center;">
        <span v-show="status.pulldownStatus === 'default'"></span>
        <span class="pulldown-arrow" v-show="status.pulldownStatus === 'down' || status.pulldownStatus === 'up'" :class="{'rotate': status.pulldownStatus === 'up'}">↓</span>
        <span v-show="status.pulldownStatus === 'loading'">
          <spinner type="ios-small"></spinner>
        </span>
      </div>
      <!--pullup slot-->
      <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
        <span v-show="status.pullupStatus === 'default'"></span>
        <span class="pullup-arrow" v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">↑</span>
        <span v-show="status.pullupStatus === 'loading'">
          <spinner type="ios-small"></spinner>
        </span>
        <div v-show="status.pullupStatus != 'loading'&&status.pullupStatus != 'default'">
          <load-more :show-loading="false" :tip="'我是底线'" background-color="#fbf9fe"></load-more>
        </div>
      </div>

    </scroller>
  </div>
</template>
<script>
import { Flexbox, FlexboxItem, Panel, LoadMore, Spinner } from "vux";
import XImg from "@/components/x-img";
import { HashMap } from "@/utils/hashMap";
import Actionsheet from "@/components/actionsheet";
import Scroller from "@/components/scroller";
import { mapGetters } from "vuex";
import store from "@/store";
import { token_expires } from "@/utils/Keyword";
import { list, shop } from "@/api/home";
import { push } from "@/utils/navigation";
import nextFunction from "@/utils/queue";
export default {
  name: "home",
  components: {
    Flexbox,
    FlexboxItem,
    Panel,
    Scroller,
    LoadMore,
    Actionsheet,
    Spinner,
    XImg
  },
  created() {},
  mounted() {
    this.init();
  },
  data() {
    return {
      status: {
        pullupStatus: "default",
        pulldownStatus: "default"
      },
      menus: [
        {
          label: "云优特"
        },
        {
          label: "微信",
          icon: "../../assets/images/binding.png"
        },
        {
          label: "朋友圈",
          icon: "../../assets/images/binding.png"
        }
      ],
      showMenu: false,
      items: [
        {
          img: "../../assets/images/test1.png",
          title: "商品名称商品名称商品名称商品名称称"
        },
        {
          img: "../../assets/images/test1.png",
          title: "商品名称商品名称商品名称商品名称称"
        },
        {
          img: "../../assets/images/test1.png",
          title: "商品名称商品名称商品名称商品名称称"
        },
        {
          img: "../../assets/images/test1.png",
          title: "商品名称商品名称商品名称商品名称称"
        },
        {
          img: "../../assets/images/test1.png",
          title: "商品名称商品名称商品名称商品名称称"
        }
      ]
    };
  },
  computed: {
    ...mapGetters({
      list: "homelist"
    })
  },
  methods: {
    init() {
      var _this = this;
      var a = function(re, next) {
        return _this.getGoods(next);
      };
      var b = function(re, next) {
        return _this.getShop(next);
      };
      nextFunction.nextRegisterNoback(a, b);
    },
    getShop(next) {
      let params = {
        shopId: 18
      };
      shop(params).then(res => {
        next();
      });
    },
    loadMore(el) {
      this.getGoods();
      console.log(111);
    },
    refresh() {
      this.$refs.scroller.enablePullup();
      this.getGoods();
    },
    getGoods(next) {
      var params = {
        from: 0,
        size: 10
      };
      store.dispatch("HOMELIST", params).then(res => {
        this.$refs.scroller.donePulldown();
        if (next) {
          next();
        }

        if (res == token_expires) {
          this.getGoods();
        } else {
          if (res && res.page.data.length > 0) {
            this.$refs.scroller.disablePullup();
          }
        }
      });
    },
    goDetail(id) {
      this.navigation_push("commodityDetail", { id: id });
    },
    handler(el) {
      console.log(el);
    },
    goPurchase(data) {
      console.log(data);

      this.$vux.loading.show({
        text: "正在提交"
      });
      let params = {
        goodsId: data.id,
        goodses: [
          {
            goodsId: data.id,
            skuId: data.skuId,
            num: 1
          }
        ]
      };
      store.dispatch("ORDERCOMMIT", params).then(res => {
        if (res == token_expires) {
          this.goPurchase();
        } else {
          this.$vux.loading.hide();
          this.navigation_push("conoforder", {
            id: this.items.goods.goodsId,
            skuId: this.items.goods.skuId
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.home {
  .home-header {
    padding: 0.3333rem;
    .home-banner {
      background-image: url(./../../assets/images/homeback.png);
      background-size: 100%;
      height: 3.3333rem;
    }
    .home-header-img-auth {
      float: left;
      display: flex !important;
      align-items: Center;
      height: 100%;
    }
    .home-header-content {
      width: calc(100% - 2.7733rem);
      padding: 0.64rem 0;
      div {
        padding: 0 0 0 0.3067rem;
      }
      .home-header-content-name {
        font-weight: Bold;
        font-size: 0.4533rem;
        color: #ffffff;
      }
      .home-header-content-des {
        font-size: 0.4rem;
        color: #ffffff;
        margin-top: 0.1333rem;
      }
      .home-header-content-footer {
        margin-top: 0.2rem;
        .home-header-content-land {
          display: flex;
          align-items: center;
          height: 0.6067rem;
          width: 2.24rem;
          background-color: #ffffff;
          border-radius: 4px;
          img {
            width: 0.3733rem;
            height: 0.3733rem;
            margin-right: 0.1333rem;
          }
          span {
            color: #f30901;
            font-size: 0.3467rem;
          }
        }
      }
    }
    .home-header-flex {
      height: 100%;
      .home-header-flex-item {
        display: inline-block;
        .home-header-img-auth-img {
          height: 2.4667rem;
          width: 2.4667rem;
          margin-left: 0.2267rem;
        }
      }
    }
  }
  //精选
  .home-secod {
    text-align: center;
    padding: 0.44rem 0;
    img {
      width: 4.6267rem;
      height: 0.7467rem;
    }
  }
  .home-items-name {
    width: 100%;
    height: 1.3rem;
    line-height: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
</style>
